<div class="modal-header page">
    <h2>{{teiAddLabel}}</h2>
</div>
<div class="modal-body">
    <div class='row' ng-if="addingRelationship">
        <div class='col-md-12'>
            <select ng-model="relationship.selected"
                    class="form-control"
                    ng-options="rel as rel.displayName for rel in relationshipTypesForSelector | orderBy: 'displayName'"
                    ng-disabled="relatedProgramRelationship">
                <option value="">{{'please_select_a_relationship'| translate}}</option>
            </select>
        </div>
    </div>

    <div class="row" ng-if="addingRelationship && relationship.selected || addingTeiAssociate">
        <hr ng-if="addingRelationship">
        <h6 ng-if="addingRelationship && relationship.selected.bidirectional" class="bidirectional-bar">{{relationship.selected.fromToName}} <i class="fa fa-arrow-right"></i> {{relationship.selected.toFromName}}</h6>
        <h3 ng-if="!addingRelationship && selectedTeiForDisplay">
            <span class='col-sm-12'>
                {{'existing_associate' | translate}}
            </span>            
        </h3>
        <div class="col-xs-3" ng-if="addingRelationship || selectedTeiForDisplay">
            <div class='relationship-container'>
                <table class="table table-striped table-compact table-borderless">
                    <tr ng-repeat="attribute in selectedTeiForDisplay.attributes">
                        <td>
                            {{attribute.displayName}}
                        </td>
                        <td>
                            {{attribute.value}}                                                                                                  
                        </td>
                    </tr>           
                </table>
            </div>
        </div>
        <div ng-class="{true: 'col-xs-9 pull-right', false: 'col-xs-12'} [addingRelationship || selectedTeiForDisplay]">  
            <div class='relationship-container' ng-class="{true: '', false: 'col-xs-6'} [addingRelationship]" ng-if="teiForRelationship">
                <button class="btn btn-warning" type="button" ng-click="back()">{{'back' | translate}}</button>
                <table class="table table-striped table-compact table-borderless">
                    <tr ng-repeat="gridColumn in gridColumns">
                        <td>
                            {{gridColumn.displayName}}
                        </td>
                        <td >                                                
                            {{teiForRelationship[gridColumn.id]}}                                                
                        </td> 
                    </tr>
                </table>                
            </div>
            <div class='relationship-container' ng-if="!teiForRelationship">
                <div class="row">                    
                    <div ng-controller="ListsController" style="padding:20px;padding-top:0px;">
                        <div class="row no-margin">
                            <div class="btn-group" ng-if="!relatedPredefinedProgram">
                                    <select ng-model="base.selectedProgramForRelative"
                                            class="form-control"
                                            style="margin-top:6px;"
                                            ng-disabled="programs.length < 1 || (base.selectedProgramForRelative && selectedProgram.relatedProgram && relatedProgramRelationship)"
                                            ng-options="program as program.displayName for program in relatedAvailablePrograms | orderBy: 'displayName'" 
                                            ng-change="onSelectedProgram(base.selectedProgramForRelative)">
                                        <option value="">{{'please_select_a_program'| translate}}</option>
                                    </select>                
                                </div>
                            <div style="margin-bottom:5px;display: inline-block;">
                                <div class="btn-group" ng-if="base.selectedProgramForRelative">
                                    <button class="btn btn-success" type="button" title="{{'register'| translate}}" ng-click="showRegistration();currentTrackedEntityList = null;showCustomWorkingListInline = false;" ng-if="canRegister">{{'register' | translate}}</button>
                                </div>
                            </div>
                        </div>
                        
                        <div ng-if="base.selectedProgramForRelative">
                            <div ng-if="!showRegistrationDiv" ng-include="'components/home/search/search.html'"></div>
                        </div>

                    </div>                   
                </div>                
                <div ng-show="showRegistrationDiv" style="padding:20px;">
                    <div ng-include="'components/teiadd/registration.html'"></div>
                    <span>&nbsp;</span>
                </div>
            </div>
        </div>        
    </div>
</div>
<div class="modal-footer">        
    <button class="btn btn-primary trim" data-ng-click="addRelationship()" ng-show='teiForRelationship'>{{addingRelationship ? 'save' : 'select' | translate}}</button>
    <button class="btn btn-default" data-ng-click="close()">{{'close'| translate}}</button>    
</div> 